<template>
  <div>
    <!-- 操作 -->
    <div class="dis-o-between operate-line">
      <div>
        <el-button icon="el-icon-plus" plain type="primary" @click="addClick" size="small">新增</el-button>
        <!-- <el-button icon="el-icon-download" plain type="warning" @click="exportClick" size="small">导出</el-button>
        <el-button icon="el-icon-upload2" type="info" @click="uploadClick" size="small">导入</el-button> -->
      </div>
      <RightToolbar :search="false" @queryTable="reqTableData(1)"></RightToolbar>
    </div>


    <el-table v-loading="loading" ref='multipleTable' :data="tableData">
      <el-table-column v-for="(item, index) in tableTitle" :key="index" :prop="item.prop" :label="item.label"
        :type="item.type" :fixed="item.fixed ? item.fixed : null" :align="item.align" :width="item.width">
        <template slot-scope="scope">
          <div v-if="['photoUrlList'].includes(item.prop) && scope.row[item.prop] !== null" style="text-align: center;">
            <el-button @click="lookClick(pathData(scope.row[item.prop]))">查看</el-button>
          </div>
          <div v-else>{{ scope.row[item.prop] }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template #default='scope'>
          <el-button class="btn" type="text" @click="editRow(scope.row)">编辑</el-button>
          <el-button class="btn" type="text" @click="delRow(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <paginationCom :pagination="pagination" @handleSizeChange="handleSizeChange"
      @handleCurrentChange=handleCurrentChange>
    </paginationCom>

    <el-dialog :title="title" :visible.sync="dialogVisible" width="800px" v-dialogDrag>
      <el-form :model="dialogForm" ref="dialogForm" label-width="130px">
        <el-form-item label="部件类型名称" :rules="{ required: true, message: '部件类型名称不能为空', trigger: 'blur' }"
          prop="partsName">
          <el-input v-model="dialogForm.partsName" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="dialogForm.remark" placeholder="请输入" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="anniu">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="sureLoading" @click="addDialogSure('dialogForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'part',
  data() {
    return {
      // 表格
      loading: false,
      tableData: [],
      tableTitle: [
        { prop: 'partsName', label: '部件类型名称', width: '', align: 'center', fixed: "", type: "" },
        { prop: 'remark', label: '备注', width: '', align: 'center', fixed: "", type: "" },
        { prop: 'createTime', label: '创建时间', width: '', align: 'center', fixed: "", type: "" },
      ],
      // 分页器
      pagination: {
        total: 0,
        per_page: 10,
        from: 1,
        to: 0,
        current_page: 1, //当前页数
      },
      // dialog
      title: '',
      dialogVisible: false,
      dialogForm: {},
      sureLoading: false,
    };
  },
  props: {},

  components: {},

  created() { },

  mounted() {
    this.reqTableData();//表格
  },

  beforeDestroy() { },

  methods: {
    exportClick() { },
    uploadClick() { },
    addClick() {
      this.dialogForm = {}
      this.title = '新增';
      this.dialogVisible = true;
      this.$refs.dialogForm ? this.$refs.dialogForm.resetFields() : undefined
    },
    editRow(row) {
      this.title = '编辑';
      let data = JSON.parse(JSON.stringify(row))
      console.log(JSON.parse(JSON.stringify(row)));
      this.dialogVisible = true;
      this.dialogForm = data
    },
    delRow(row) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.sendGet('/parts/delete', {
          id: row.id
        }).then(res => {
          if (res.errcode == 0) {
            this.suc({
              message: res.errmsg
            })
            this.reqTableData()
          } else {
            this.err({
              message: res.errmsg
            })
          }
        })
      }).catch(() => { });
    },
    addDialogSure() {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.sureLoading = true
          let data = {
            ...this.dialogForm,
          }
          console.log(JSON.parse(JSON.stringify(data)));
          let res = await this.sendPost('/parts/insertOrUpdateParts', data);
          if (res.errcode == 0) {
            this.suc({
              message: res.errmsg
            });
            this.reqTableData();
            this.dialogVisible = false;
            this.sureLoading = false
          } else {
            this.sureLoading = false
            this.err({
              message: res.errmsg
            })
          }
        } else {
          return false;
        }
      });

    },
    handleSizeChange(val) {
      this.pagination.per_page = val;
      this.reqTableData(1);
    },
    handleCurrentChange(val) {
      this.pagination.current_page = val;
      this.reqTableData();
    },
    async reqTableData(num) {
      this.loading = true;
      this.$refs.multipleTable ? this.$refs.multipleTable.bodyWrapper.scrollTop = 0 : null;//滚动条置顶  
      if (num) {
        this.pagination.current_page = num;
      }
      let data = {
        pageNum: this.pagination.current_page,
        pageSize: this.pagination.per_page,
      }
      const res = await this.sendPost('/parts/getPartsByObj', data);
      if (res.errcode == 0) {
        this.loading = false;
        this.pagination.total = res.data.total
        if (res.data.list && res.data.list.length > 0) {
          this.tableData = res.data.list;
        } else {
          this.tableData = [];
        }
      } else {
        this.loading = false;
        this.err({
          message: res.errmsg
        })
      }
    },
  },

  computed: {},

  watch: {},

  directives: {},

  filters: {}
};
</script>

<style scoped lang="scss"></style>
